<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../../css/style.css" rel="stylesheet" type="text/css" />
    <link href="../../css/style.css" rel="stylesheet" type="text/css" />
    <!--axios-->
    <script type="text/javascript" src="../../js/axios.js"></script>
    <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../../js/api.js"></script>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script>
        $(function (){
            view();
            orderdetailecho()
        })
        function getParameter(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
            var r = location.search.substr(1).match(reg);
            if (r!=null) return (r[2]); return null;
        }
        function view(){
            let orderId = getParameter("orderId");
            var url="http://121.37.227.40:8000/"
            axios({
                url:url+'marketing/queryOrderView',
                method:"POST",
                data:{
                },
                params:{
                    orderId:orderId
                },
                dataType:"JSON"
            }).then(function (rel) {
                rel = rel.data
                console.log(rel)
                let data = rel.resultData[0];
                var customid=data.customId
                $("#ordersId").val(data.orderId)
                $("#ordersTime").val(data.orderTime)
                $("#operator").val(data.operator.uName)
                $("#to").val(data.orderMoney)
                layui.use(['element','form'], function() {
                    var form = layui.form;
                    var url = "http://121.37.227.40:8000/"
                    axios({
                        url: url + 'marketing/queryCustom',
                        method: "POST",
                        data: {},
                        params: {},
                        dataType: "JSON"
                    }).then(function (rel) {
                        rel = rel.data;
                        console.log(rel)
                        $.each(rel.resultData, function (key, val) {
                            $('#name').append(new Option(val.customName, val.customId));
                        });
                        for (var i=0;i<rel.resultData.length;i++){
                            var data=rel.resultData[i]
                            if (data.customId==customid){
                                $("#name").val(data.customId)
                            }
                        }
                        form.render()
                    })
                })
            })
        }
        var countid=1;
        function vieworderdetil(countid) {
            var url="http://121.37.227.40:8000/"
            axios({
                url:url+'marketing/queryBrand',
                method:"POST",
                data:{
                },
                params:{
                },
                dataType:"JSON"
            }).then(function (rel){
                rel=rel.data;
                let str=
                        '      \t<tr>\n' +
                        '            <td>\n' +
                        '                <input type="checkbox" name="fav" onclick="check2()">\n' +
                        '            </td>\n' +
                        '          <td><span id="xh">1</span></td>\n' +
                        '          <td>\n' +
                        '          \t<select id="'+countid+'-1"  onchange="bchange('+countid+')">\n' +
                        '                <option value="0">请选择</option>\n' +
                        '            </select>\n' +
                        '          </td>\n' +
                        '          <td>\n' +
                        '          \t<select id="'+countid+'-2" onchange="tchange('+countid+')">\n' +
                        '                <option value="0">请选择</option>\n' +
                        '            </select>\n' +
                        '          </td>\n' +
                        '          <td>\n' +
                        '          \t<select id="'+countid+'-3" onchange="pchange('+countid+')" name="productId" class="subVerify2">\n' +
                        '                <option value="0">请选择</option>\n' +
                        '            </select>\n' +
                        '          </td>\n' +
                        '          <td>\n' +
                        '              <input type="text"  value="" class="subVerify3" name="purchaseNum" oninput="getPrice(this),getTotal()" id="'+countid+'-4">\n' +
                        '          </td>\n' +
                        '          <td><span id="'+countid+'-5"></span></td>\n' +
                        '          <td><input type="text" value="" name="proPrice" readonly="readonly" id="'+countid+'-6"/></td>\n' +
                        '          <td><input  type="text" readonly="readonly" id="'+countid+'-7" class="price" name="proTotal" value=""></td>\n' +
                        '        </tr>\n'

                    $("#tbo").append(str)
                    var op='<option value="0">请选择</option>';
                    for (var i=0;i<rel.resultData.length;i++){
                        var data=rel.resultData[i]
                        op+='<option value="'+data.brandId +'">'+ data.brandName +'</option>'
                    }
                    $("#"+countid+'-1').html(op);


                    var xh=document.querySelectorAll("#xh");
                    for (var i=0;i<xh.length;i++){
                        xh[i].innerHTML=(i+1)
                    }

            })
        }
        function orderdetailecho(){
            let orderId = getParameter("orderId");
            var url="http://121.37.227.40:8000/"
            axios({
                url:url+'marketing/queryOrderDetails',
                method:"POST",
                data:{
                },
                params:{
                    orderId:orderId
                },
                dataType:"JSON"
            }).then(function (rm) {
                rm=rm.data;
                console.log(rm)
                for (var i=0;i<rm.resultData.length;i++) {
                    var data = rm.resultData[i]
                    var brand=data.product.type.brand.brandId
                    var type=data.product.typeId
                    var product=data.product.productId
                    var num=data.purchaseNum
                    var unit=data.product.productUnit
                    var price=data.proPrice
                    var prototal=data.proTotal
                    var url="http://121.37.227.40:8000/"
                    axios({
                        url:url+'marketing/queryBrand',
                        method:"POST",
                        data:{
                        },
                        params:{
                        },
                        dataType:"JSON"
                    }).then(function (rel){
                        rel=rel.data;
                        console.log(rel)
                        let strs=
                            '      \t<tr>\n' +
                            '            <td>\n' +
                            '                <input type="checkbox" name="fav" onclick="check2()">\n' +
                            '            </td>\n' +
                            '          <td><span id="xh">1</span></td>\n' +
                            '          <td>\n' +
                            '          \t<select id="'+countid+'-1"  onchange="bchange('+countid+')">\n' +
                            '                <option value="0">请选择</option>\n' +
                            '            </select>\n' +
                            '          </td>\n' +
                            '          <td>\n' +
                            '          \t<select id="'+countid+'-2" onchange="tchange('+countid+')">\n' +
                            '                <option value="0">请选择</option>\n' +
                            '            </select>\n' +
                            '          </td>\n' +
                            '          <td>\n' +
                            '          \t<select id="'+countid+'-3" onchange="pchange('+countid+')" name="productId" class="subVerify2">\n' +
                            '                <option value="0">请选择</option>\n' +
                            '            </select>\n' +
                            '          </td>\n' +
                            '          <td>\n' +
                            '              <input type="text"  value=""  name="purchaseNum" class="subVerify3" oninput="getPrice(this),getTotal()" id="'+countid+'-4">\n' +
                            '          </td>\n' +
                            '          <td><span id="'+countid+'-5"></span></td>\n' +
                            '          <td><input type="text" value="" name="proPrice" readonly="readonly" id="'+countid+'-6"/></td>\n' +
                            '          <td><input  type="text" readonly="readonly" id="'+countid+'-7" class="price" name="proTotal" value=""></td>\n' +
                            '        </tr>\n'
                        $("#tbo").append(strs)
                        var str='<option value="0">请选择</option>';
                        for (var i=0;i<rel.resultData.length;i++){
                            var data=rel.resultData[i]
                            if (data.brandId==brand){
                                str+='<option value="'+data.brandId +'" selected>'+ data.brandName +'</option>'
                            }else {
                                str+='<option value="'+data.brandId +'">'+ data.brandName +'</option>'
                            }
                        }
                        console.log(str)
                        $("#"+countid+'-1').html(str);
                        $("#"+countid+'-4').val(num);
                        $("#"+countid+'-5').html(unit);
                        $("#"+countid+'-6').val(price);
                        $("#"+countid+'-7').val(prototal);

                        let tempid = countid;
                        var url="http://121.37.227.40:8000/"
                        axios({
                            url:url+'marketing/queryType',
                            method:"POST",
                            data:{
                            },
                            params:{
                                brandId:brand
                            },
                            dataType:"JSON"
                        }).then(function (rel){
                            rel=rel.data;
                            var str1='<option value="0">请选择</option>'
                            for (var i=0;i<rel.resultData.length;i++){
                                var data=rel.resultData[i]
                                if (data.typeId==type){
                                    str1+='<option value="'+data.typeId +'" selected>'+ data.typeName +'</option>'
                                }else {
                                    str1+='<option value="'+data.typeId +'">'+ data.typeName +'</option>'
                                }
                            }
                            console.log(str1)
                            $("#"+tempid+'-2').html(str1)

                            axios({
                                url:url+'marketing/queryProduct',
                                method:"POST",
                                data:{
                                },
                                params:{
                                    typeId:type
                                },
                                dataType:"JSON"
                            }).then(function (rel){
                                rel=rel.data;
                                console.log(rel)
                                var str2='<option value="0">请选择</option>'
                                for (var i=0;i<rel.resultData.length;i++){
                                    var data=rel.resultData[i]
                                    if (data.productId==product){
                                        str2+='<option value="'+data.productId +'" selected>'+ data.productModel +'</option>'
                                    }else {
                                        str2+='<option value="'+data.productId +'">'+ data.productModel +'</option>'
                                    }
                                }
                                console.log(str2)
                                $("#"+tempid+'-3').html(str2)
                            })
                        })
                        var xh=document.querySelectorAll("#xh");
                        for (var i=0;i<xh.length;i++){
                            xh[i].innerHTML=(i+1)
                        }
                        countid++;
                    })
                }
            })
        }
    </script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>营销管理</li>
    <li>订购单管理</li>
    <li>修改</li>
  </ul>
</div>
<div class="formbody">
  <div class="formtitle"><span>订购单信息</span></div>
  <ul class="forminfo">
    <li>
      <label>订单编号</label>
      <input name="" type="text" value="" readonly="readonly" class="roinput" id="ordersId"/>
      <i>自动生成不能编辑</i>
    </li>
    <li class=" layui-form">
      <label>客户姓名</label>
        <div class="layui-input-inline">
        <select name=""  id="name" lay-verify="required" lay-search=""></select>
        </div>
      <i>不能为空</i>
    </li>
    <li>
      <label>订购时间</label>
      <input name="" type="text" value="" readonly="readonly" class="roinput" id="ordersTime"/>
      <i>不能编辑</i>
    </li>
    <li>
      <label>创建人</label>
      <input name="" type="text" value="" readonly="readonly" class="roinput" id="operator"/>
      <i>不能编辑</i>
    </li>
    <li>
      <label>审核状态</label>
      <input type="text" value="未审核" readonly="readonly" class="roinput" />
      <input name="" type="hidden" value="1" />
      <i>初始状态，不能编辑</i>
    </li>
    <li>
      <label>总金额</label>
      <input name="" type="text" value="" readonly="readonly" class="roinput" id="to"/>
       <i>自动运算，不能编辑</i>
    </li>
    <li>
      <input type="button" value="新增" class="smallbtn" onclick="add()" />
      &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" value="删除" class="smallbtn" onclick="checkdel()"/>
       &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" value="保存" class="smallbtn" onclick="suborders()"/>
       &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" value="返回" class="smallbtn" onclick="window.location.href='orderList.html'"/>
    </li>
  </ul>
    <form id="addOrder">
  <table class="tablelist">
      <thead>
        <tr>
            <th>
                <input name="fav"  type="checkbox" id="checkAll"
                       onclick="check1(this),check2()">全选
            </th>
          <th>序号</th>
          <th>品牌</th>
          <th>类型</th>
          <th>型号</th>
          <th>数量</th>
          <th>单位</th>
          <th>单价</th>
          <th>金额</th>
        </tr>
      </thead>
      <tbody id="tbo">
<!--        <tr>-->
<!--          <td>1</td>-->
<!--          <td>-->
<!--          	<select>-->
<!--            	<option>请选择</option>-->
<!--                <option selected="selected">联想</option>-->
<!--                <option>海尔</option>-->
<!--                <option>小米</option>-->
<!--            </select>-->
<!--          </td>-->
<!--          <td>-->
<!--          	<select>-->
<!--            	<option>请选择</option>-->
<!--                <option selected="selected">笔记本电脑</option>-->
<!--                <option>台式电脑</option>-->
<!--                <option>手机</option>-->
<!--            </select>-->
<!--          </td>-->
<!--          <td>-->
<!--          	<select>-->
<!--            	<option>请选择</option>-->
<!--                <option>X260</option>-->
<!--                <option>E470</option>-->
<!--                <option selected="selected">T470</option>-->
<!--            </select>-->
<!--          </td>-->
<!--          <td><input type="text" value="10" /></td>-->
<!--          <td>台</td>-->
<!--          <td><input type="text" value="9998" /></td>-->
<!--          <td><input type="text" value="99980" /></td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--          <td>2</td>-->
<!--          <td>-->
<!--          	<select>-->
<!--            	<option>请选择</option>-->
<!--                <option selected="selected">联想</option>-->
<!--                <option>海尔</option>-->
<!--                <option>小米</option>-->
<!--            </select>-->
<!--          </td>-->
<!--          <td>-->
<!--          	<select>-->
<!--            	<option>请选择</option>-->
<!--                <option selected="selected">笔记本电脑</option>-->
<!--                <option>台式电脑</option>-->
<!--                <option>手机</option>-->
<!--            </select>-->
<!--          </td>-->
<!--          <td>-->
<!--          	<select>-->
<!--            	<option>请选择</option>-->
<!--                <option selected="selected">X260</option>-->
<!--                <option>E470</option>-->
<!--                <option>T470</option>-->
<!--            </select>-->
<!--          </td>-->
<!--          <td><input type="text" value="5" /></td>-->
<!--          <td>台</td>-->
<!--          <td><input type="text" value="5500" /></td>-->
<!--          <td><input type="text" value="27500" /></td>-->
<!--        </tr>-->
      </tbody>
  </table>
    </form>
</div>
<script type="text/javascript">
	$('.tablelist tbody tr:odd').addClass('odd');

    var checkNodes = document.getElementsByName("fav");
    var sum=0;
    function check1(obj){
        var flag = obj.checked;
        for (var i in checkNodes) {
            checkNodes[i].checked=flag;
        }
    }
    function check2() {
        var flag = true;
        for (var i = 1; i < checkNodes.length; i++) {
            if (!checkNodes[i].checked) {
                flag = false;
                break;
            }
        }
        checkNodes[0].checked=flag;
    }
    function getPrice(obj){
        // var v1=obj.parentNode.previousElementSibling.firstElementChild.value;
        var v1= obj.parentNode.nextElementSibling.nextElementSibling.firstElementChild.value;
        var v2=obj.value;
        var price =v1*v2;
        obj.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild.value=price;
    }
    function add(){
        countid++;
        vieworderdetil(countid)
    }

    function checkdel(){
        for (var i=1;i<checkNodes.length;i++){
            if (checkNodes[i].checked){
                checkNodes[i].parentNode.parentNode.remove()
                i--;
            }else {
                continue;
            }
        }
        var xh=document.querySelectorAll("#xh");
        for (var i=0;i<xh.length;i++){
            xh[i].innerHTML=(i+1)
        }
        getTotal()
    }
    function getTotal(){
        sum=document.querySelectorAll(".price");
        var total=0;
        var totals=0;
        for (var i=0;i<sum.length;i++){
            total+=Number(sum[i].value)
        }
        totals=Number(total)
        $("#to").val(totals)
    }

    function bchange(countid) {
        $("#"+countid+'-6').val("")
        $("#"+countid+'-7').val("")
        $("#to").val("")
        $("#"+countid+'-4').val("")
        $("#"+countid+'-2').val("0")
        $("#"+countid+'-3').val("0")
        $("#"+countid+'-5').empty()
        var id=countid+'-2'
        var s= document.getElementById(`${id}`)
        remove1(s)
        var brandId=$("#"+countid+'-1').val()
        var url="http://121.37.227.40:8000/"
        axios({
            url:url+'marketing/queryType',
            method:"POST",
            data:{
            },
            params:{
                brandId:brandId
            },
            dataType:"JSON"
        }).then(function (rel){
            rel=rel.data;
            var str='<option value="0">请选择</option>'
            for (var i=0;i<rel.resultData.length;i++){
                var data=rel.resultData[i]
                str+='<option value="'+data.typeId +'">'+ data.typeName +'</option>'
            }
            $("#"+countid+'-2').html(str)
        })
    }

    function tchange(countid) {
        $("#"+countid+'-6').val("")
        $("#"+countid+'-7').val("")
        $("#to").val("")
        $("#"+countid+'-4').val("")
        $("#"+countid+'-3').val("0")
        $("#"+countid+'-5').empty()
        var s= document.getElementById(countid+'-3')
        remove1(s)
        var typeId=$("#"+countid+'-2').val()
        var url="http://121.37.227.40:8000/"
        axios({
            url:url+'marketing/queryProduct',
            method:"POST",
            data:{
            },
            params:{
                typeId:typeId
            },
            dataType:"JSON"
        }).then(function (rel){
            rel=rel.data;
            console.log(rel)
            var str='<option value="0">请选择</option>'
            for (var i=0;i<rel.resultData.length;i++){
                var data=rel.resultData[i]
                str+='<option value="'+data.productId +'">'+ data.productModel +'</option>'
            }
            $("#"+countid+'-3').html(str)
        })
    }

    function pchange(countid) {
        $("#"+countid+'-6').val("")
        $("#"+countid+'-7').val("")
        $("#to").val("")
        $("#"+countid+'-4').val("")
        $("#"+countid+'-5').empty()
        var productId=$("#"+countid+'-3').val()
        if (productId!=0){
            var url="http://121.37.227.40:8000/"
            axios({
                url:url+'marketing/queryProductDetail',
                method:"POST",
                data:{
                },
                params:{
                    productId:productId
                },
                dataType:"JSON"
            }).then(function (rel){
                rel=rel.data;
                console.log(rel)
                $("#"+countid+'-5').html(rel.resultData[0].productUnit)
                $("#"+countid+'-6').val(rel.resultData[0].productPrice)
            })
        }
    }

    function remove1(s) {
        var options = s.getElementsByTagName("option");
        for(var i = 0; i < options.length; i++) {
            s.removeChild(options[i]);
            i--;
        }
    }

    function suborders() {
        var s1=document.querySelectorAll(".subVerify2")
        var s2= document.querySelectorAll(".subVerify3")
        var flag=true;
        for (var i=0;i<s1.length;i++){
            if (s1[i].value==0){
                flag=false
            }
        }
        for (var i=0;i<s2.length;i++){
            if (s2[i].value==0||s2[i].value==null){
                flag=false
            }
        }
        if (flag) {
            var ordersid = $("#ordersId").val()
            var name = $("#name").val()
            var total = $("#to").val()
            var url = "http://121.37.227.40:8000/"
            axios({
                url: url + 'marketing/updateOrder',
                method: "POST",
                data: {},
                params: {
                    orderId: ordersid,
                    customId: name,
                    orderMoney: total
                },
                dataType: "JSON"
            }).then(() => {
                var orderId = $("#ordersId").val()
                var data = $("#addOrder").serialize()
                data += "&orderId=" + orderId;
                console.log(data)
                axios({
                    method: "post",
                    url: 'http://121.37.227.40:8000/marketing/addOrderDetail',
                    data
                }).then(function () {
                    window.location.href = 'orderList.html'
                })
            })
        }else {
            layer.msg('请填写完整', {icon: 5});
        }
    }
</script>
</body>
</html>
